<template>
    <div class="out_box">
        <div class="relative content_box">
            <div class="case_box logs_box mb_20">
                <div class="title cl">
                    <h2 class="f_l">
                        注册清单
                    </h2>
                    <span class="f_r tips">可通过本列表查询团队旗下与自己利益相关联的用户信息</span>
                </div>
                <div class="content gray_table text_c gray_thead">
                    <v-data-table :data='getData' :currentData='dataList.records' :columns='columnsData' stripe :emptyText="not_data">
                        <template slot="td" slot-scope="props">
                            <div v-if="props.column.field === 'issupplie'">
                                <div class="text font_orange">{{ props.content === '0' ? 'vip-1' : 'vip-2' }}</div>
                            </div>
                            <div v-else-if="props.column.field === 'registrationTime'">
                                <span class="text_l dis_ib">{{ $getFormatMD(new Date(props.content), true).split(' ')[0] }}<br />{{ $getFormatMD(new Date(props.content), true).split(' ')[1] }}</span>
                            </div>
                            <div v-else-if="props.column.field === 'certification'">
                                <span class="text" v-show="props.content === '0'">未实名</span>
                                <span class="text" v-show="props.content === '1'">审核中</span>
                                <span class="text" v-show="props.content === '2'">已实名</span>
                            </div>
                            <div v-else-if="props.column.field === 'orderNumber'">
                                <span class="text font_theme">{{ props.content ? '是' : '否' }}</span>
                            </div>
                            <span v-else>{{ props.content }}</span>
                        </template>
                    </v-data-table>
                    <div class="pagination_box pr_20">
                        <v-pagination @change="changePage" :total="dataList.total" :show-total="showTotal" show-quick-jumper></v-pagination>
                    </div>
                </div>
            </div>
            <div class="case_box logs_box mb_20">
                <div class="title cl">
                    <h2 class="f_l">
                        购买清单
                    </h2>
                    <span class="f_r tips">可通过本列表查询团队旗下与自己利益相关联的用户信息</span>
                </div>
                <div class="content gray_table text_c gray_thead">
                    <v-data-table :data='getData' :currentData='dataPurchaseList.records' :columns='columnsPurchaseData' stripe :emptyText="not_data">
                        <template slot="td" slot-scope="props">
                            <div v-if="props.column.field === 'releaseTime'">
                                <span class="text_l dis_ib">{{ $getFormatMD(new Date(props.content), true).split(' ')[0] }}<br />{{ $getFormatMD(new Date(props.content), true).split(' ')[1] }}</span>
                            </div>
                            <div v-else-if="props.column.field === 'certification'">
                                <span class="text" v-show="props.content === '0'">未实名</span>
                                <span class="text" v-show="props.content === '1'">审核中</span>
                                <span class="text" v-show="props.content === '2'">已实名</span>
                            </div>
                            <div v-else-if="props.column.field === 'operate'">
                                <a href="javascript:void(0)" class="text font_theme">查看订单</a>
                            </div>
                            <span v-else>{{ props.content }}</span>
                        </template>
                    </v-data-table>
                    <div class="pagination_box pr_20">
                        <v-pagination @change="changePurchasePage" :total="dataPurchaseList.total" :show-total="showPurchaseTotal" show-quick-jumper></v-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getMemberList } from '@doapis/personal/team.js';

    export default {
        name: "MemberList",
        data: function() {
            return {
                dataList: {
                    current: 1,
                    records: [],
                    total: 0
                },
                dataPurchaseList: {
                    current: 1,
                    records: [],
                    total: 0
                },
                columnsData:[
                    { title:"序号", field:'id', width: '11.11%' },
                    { title:"注册时间", field:'registrationTime', width: '11.11%' },
                    { title:"用户级别", field:'issupplie', width: '11.11%' },
                    { title:"手机号码", field:'mobilePhone', width: '11.11%' },
                    { title:"用户姓名", field:'userName', width: '11.11%' },
                    { title:"实名状态", field:'certification', width: '11.11%' },
                    { title:"推荐关系", field:'field_7', width: '11.11%' },
                    { title:"推荐人手机", field:'mobilePhone2', width: '11.11%' },
                    { title:"是否购买", field:'orderNumber', width: '11.11%' },
                ],
                columnsPurchaseData:[
                    { title:"序号", field:'id', width: '11.11%' },
                    { title:"首单购买时间", field:'releaseTime', width: '11.11%' },
                    { title:"订单总数量(笔)", field:'orderNumber', width: '11.11%' },
                    { title:"手机号码", field:'mobilePhone', width: '11.11%' },
                    { title:"用户姓名", field:'userName', width: '11.11%' },
                    { title:"实名状态", field:'certification', width: '11.11%' },
                    { title:"推荐关系", field:'field_7', width: '11.11%' },
                    { title:"累计订单金额", field:'orderMoney', width: '11.11%' },
                    { title:"操作", field:'operate', width: '11.11%' },
                ],
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                return userDATA;
            }
        },
        methods: {
            getData: function(params) {
                const that = this;
                params = params || {};
                return !params.type ? $.$getPromiseNullData() : getMemberList({
                    current: params.type === 1 ? that.dataList.current : that.dataPurchaseList.current,
                    memberid: that.userDATA.memberid
                }).then(function(res) {
                    let data = res.data;
                    // 注册清单
                    that.dataList = data;

                    // 购买清单
                    let dataPurchaseList = [];
                    let i = 0;
                    do {
                        if (Number(data.records[i].orderNumber) > 0) dataPurchaseList.push(data.records[i]);
                        i++;
                    } while (i < data.records.length);
                    data.records = dataPurchaseList;
                    that.dataPurchaseList = data;
                });
            },
            showTotal: function(val) {
                return '全部' + this.dataList.total + '条';
            },
            changePage: function(val) {
                this.dataList.current = val;
                this.getData({ type: 1 });
            },
            showPurchaseTotal: function(val) {
                return '全部' + this.dataList.total + '条';
            },
            changePurchasePage: function(val) {
                this.dataPurchaseList.current = val;
                this.getData({ type: 2 });
            },
            $getFormatMD: $.$getFormatMD
        },
        mounted: function() {
            this.getData({ type: 1 });
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .out_box{
        background-color: #eaeaea;
    }
    .content_box{
        .case_box{
            background-color: white;
            >.title{
                padding: 16px 20px;
                font-size: 13px;
                .font_theme;
            }
        }
        .logs_box{
            .tips{
                margin-top: 8px;
                font-size: 10px;
                color: #CCC;
            }
            .content{
                font-size: 16px;
                margin-bottom: 10px;
                padding-bottom: 20px;
            }
        }
    }
</style>
